<template>
  <div id="changepassword-page" :style="{
    width:'100%',
    height: (this.getWinSize().height-43-this.getSafeArea().top)+'px',
    paddingTop:(43+this.getSafeArea().top)+'px'
  }">
    <div class="page-title" :style="{
      top:(this.getSafeArea().top)+'px'
    }">
      <div id="back-button" @click="$router.push('/MemberSetUp')">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span>修改密码</span>
    </div>
    <el-form class="form-box" :model="currFormData" ref="currForm" label-width="100px" :rules="formRule">
      <el-form-item
        label="旧密码:"
        prop="oldPassword">
        <el-input type="password" v-model.number="currFormData.oldPassword" :maxlength="30"></el-input>
      </el-form-item>

      <el-form-item
        label="新密码:"
        prop="password">
        <el-input type="password" v-model.number="currFormData.password" :maxlength="30"></el-input>
      </el-form-item>

      <el-form-item
        label="确认密码:"
        prop="rePassword">
        <el-input type="password" v-model.number="currFormData.rePassword" :maxlength="30"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button  style="width: 60%;" type="primary" size="small" @click="submitForm()">确认修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
const formData = {
  oldPassword: '',
  password: '',
  rePassword: ''
}
export default {
  name: "MemberChangePassword",
  data:function (){
    // 旧密码,新密码检查
    var validatePassOld = (rule, value, callback) => {
      if (value.length < 6 || value.length>30) {
        callback(new Error('旧密码 长度在 6~30 之间'))
      }
    }

    // 旧密码,新密码检查
    var validatePass = (rule, value, callback) => {
      if (value.length < 6 || value.length>30) {
        callback(new Error('新密码 长度在 6~30 之间'))
      } else {
        if (this.currFormData.password === this.currFormData.oldPassword) {
          callback(new Error('原密码,新密码 不能一致'))
        }
        // if (this.currFormData.checkPass !== '') {
        //   this.$refs.currForm.validateField('checkPass')
        // }
        callback()
      }
    }
    // 确认新密码检查
    var validatePass2 = (rule, value, callback) => {
      if (value.length < 6 || value.length>30) {
        callback(new Error('确认密码 长度在 6~30 之间'))
      } else if (value !== this.currFormData.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      isVisible: false,
      currFormData: Object.assign({}, formData),
      formRule: {
        oldPassword: [
          {required: true, message: '请输入 旧密码'},
          {validator: validatePassOld, trigger: ['blur','change']}
        ],
        password: [
          {required: true, message: '请输入 新密码'},
          {validator: validatePass, trigger: ['blur','change']}
        ],
        rePassword: [
          {required: true, message: '请输入 确认密码'},
          {validator: validatePass2, trigger: ['blur','change']}
        ]
      }
    }
  },
  methods:{
    submitForm: function () {
      this.$refs.currForm.validate((valid) => {
        if (valid) {
          var $this = this
          $this.loading = true
          $this.MyRequest(this.ApiDoNameAuth+'User/changePassword', {
            oldPassword: $this.currFormData.oldPassword,
            password: $this.currFormData.password
          }, function (res) {
            $this.loading = false
            $this.successTip('更改成功')
            // $this.currFormData.oldPassword=''
            // $this.currFormData.password=''
            // $this.currFormData.rePassword=''
            $this.$refs.currForm.resetFields()
            $this.isVisible = false
            $this.$forceUpdate()
          }, function (res) {
            $this.loading = false
            // 通用错误
            if (typeof res.message === 'string') {
              $this.successTip(res.message, 'error')
            } else {
              // 如果是指定字段错误
              var fieldKey = Object.keys(res.message)[0]
              $this.successTip(res.message[fieldKey], 'error')
              $this.setErrorByField(fieldKey, res.message[fieldKey])
            }
          })
        } else {
          console.log('验证不通过')
          return false
        }
      })
    },
  }
}
</script>

<style scoped>

</style>
